<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="房间资料" name="fangjian">
      <room-form :currentNode="currentNode"/>
    </el-tab-pane>

    <el-tab-pane label="业主资料" name="yezhu" v-if="this.status=='10002'">
      <custom-info :currentNode="currentNode"/>
    </el-tab-pane>

    <el-tab-pane label="租户管理" name="zuhu" v-if="this.status=='10003'">
     <lessee-form :currentNode="currentNode"/>
    </el-tab-pane>

    <el-tab-pane label="入伙资料" name="ruhuo" v-if="this.status=='10002'">
      <register-form :currentNode="currentNode"/>
    </el-tab-pane>

    <el-tab-pane label="租赁合同" name="zulin" v-if="this.status=='10003'">
        <lease-form :currentNode="currentNode"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import RoomForm from "./form";
  import CustomInfo from "../customInfo/form";
  import  RegisterForm from "../customInfo/RegisterForm"
  import lesseeForm  from "../customInfo/lesseeForm";
  import leaseForm from "../customInfo/leaseForm"
  import {getRoom} from "@/api/property/room";
  export default {
    name:'roomMain',
    components:{RoomForm,CustomInfo,RegisterForm,lesseeForm,leaseForm },
    data() {
      return {
        activeName: 'fangjian',
        status:null,
      };
    },
    watch: {
      currentNode(v) {
        if (v.modelType=='room'){
          getRoom(v.id).then(res=>{
            this.status = res.data.state
          })
        }
      }
    },
    created() {
      if (this.currentNode.modelType=='room'){
        getRoom(this.currentNode.id).then(res=>{
          this.status = res.data.state
        })
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    props: {
      currentNode: {
        type: Object,
        default:()=>{}
      },
    }
  };
</script>
